import React, { PureComponent } from "react";
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Modal,
    Platform,
    ScrollView
} from "react-native"

import {
    safeAreaBottomHeight
} from "../../util/AdapterUtil"
import image from "../../assets/image"
import PropTypes from 'prop-types';

class PaySelectAlertView extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            index : 0, //支付方式 0支付宝 1 微信 2 余额付款
        }
    }

    show() {
        this.setState({
            visible: true,
        })
    }

    hide() {
        this.setState({
            visible: false
        })
    }

    render() {
        let visible;
        if (this.props.visible !== undefined) {
            visible = this.props.visible;
        } else {
            visible = this.state.visible;
        }

        if (!visible) return null
        return (
            visible?
                <View style={{
                    position: 'absolute',
                    width: '100%',
                    height: '100%',
                    backgroundColor: 'rgba(0,0,0,0.5)',
                    zIndex: 999,
                }}>
                    <Modal animationType={'slide'} visible={visible} onRequestClose={() => { this.hide() }} transparent={true}>
                        <TouchableOpacity style={{flex: 1}}  onPress={()=>{  this.setState({
                            visible: false
                        })}}/>

                        <View style={{width: "100%",height : 300,position: 'relative',backgroundColor: "#fff"}}>
                            <View style={styles.header}>
                                <TouchableOpacity style={styles.close} onPress={() => { this.setState({
                                    visible: false
                                })}}>
                                    <Image source={image.ic_close} style={{ height: 25, width: 25 }} resizeMode={'cover'} />
                                </TouchableOpacity>
                            </View>

                            <TouchableOpacity style={[styles.itemStyle,{marginTop: 1,}]}
                                              onPress={()=>{  this.setState({
                                                  index: 0
                                              })}}>
                                <Image
                                    source={image.ic_alipay}
                                    style={{width: 40,height: 40}}/>

                                <Text style={{
                                    marginLeft:15,
                                    color: "#606060",
                                    fontSize: 18,
                                }}>支付宝支付</Text>
                                <View style={{flex :1}}/>
                                <Image
                                    style={{width: 20,height: 20}}
                                    source={this.state.index == 0?image.ic_selected : image.ic_nomal}/>
                            </TouchableOpacity>
                            <View style={styles.divider}/>


                            <TouchableOpacity style={styles.itemStyle}
                                              onPress={()=>{  this.setState({
                                                  index: 1
                                              })}}>
                                <Image
                                    source={image.ic_wechat}
                                    style={{width: 40,height: 40}}/>

                                <Text style={{
                                    marginLeft:15,
                                    color: "#606060",
                                    fontSize: 18,
                                }}>微信支付</Text>
                                <View style={{flex :1}}/>
                                <Image
                                    style={{width: 20,height: 20}}
                                    source={this.state.index == 1?image.ic_selected : image.ic_nomal}/>
                            </TouchableOpacity>
                            <View style={styles.divider}/>

                            <TouchableOpacity style={styles.itemStyle}
                                              onPress={()=>{  this.setState({
                                                  index: 2
                                              })}}>
                                <Image
                                    source={image.amount}
                                    style={{width: 40,height: 40}}/>

                                <Text style={{
                                    marginLeft:15,
                                    color: "#606060",
                                    fontSize: 18,
                                }}>余额支付</Text>
                                <View style={{flex :1}}/>
                                <Image
                                    style={{width: 20,height: 20}}
                                    source={this.state.index == 2?image.ic_selected : image.ic_nomal}/>
                            </TouchableOpacity>
                            <View style={styles.divider}/>


                            <TouchableOpacity style={{ marginTop: 40,marginBottom: 30, marginLeft: 20, marginRight: 20,
                                height: 50, borderRadius: 6, backgroundColor: "#4A90E2",
                                justifyContent: "center", alignItems: "center" }}
                                              onPress={()=>{
                                                  this.props.onDone && this.props.onDone(this.state.index);
                                                  this.setState({
                                                      visible: false
                                                  })
                                              }}>
                                <Text style={{ color: "#fff", fontSize: 14 }}>确认</Text>
                            </TouchableOpacity>
                            <View style={{height: safeAreaBottomHeight}}/>
                        </View>
                    </Modal >
                </View>:null
        )
    }
}

let styles = StyleSheet.create({
    itemStyle: {
        paddingLeft:15,
        paddingRight:15,
        height:50,
        flexDirection:"row",
        backgroundColor: "#fff",
        alignItems: "center"},
    divider: {
        marginLeft:70,height: 1,
        backgroundColor: "#F9F9F9",
        transform: [{ scaleY: 0.5 }]},
    header: {
        height: 45,
        alignItems: 'center',
        justifyContent: 'center',
       // borderBottomWidth: 0.5,
       // borderBottomColor: '#fff'
    },
    close: {
        position: 'absolute',
        right: 0,
        top: 0,
        width: 60,
        height: 45,
        alignItems: 'center',
        justifyContent: 'center',
    },
})

//参数类型定义
PaySelectAlertView.propTypes = {
    onDone: PropTypes.func,
    ...View.propTypes,
};


export default PaySelectAlertView
